<template>
  <div class="department">
    <pageSearch
      :search-config="searchConfig"
      @query-click="handleQueryClick"
      @reset-click="handleRestClick"
    />
    <pageContent
      ref="contentRef"
      @show-modal="handleCreateClick"
      @edit-modal="haldleEditClick"
      :content-confing="contentConfig"
    >
      <template #fortMatCreateAt="scope">{{ formatUTC(scope.row.createAt) }}</template>
      <template #fortMatUpdateAt="scope">{{ formatUTC(scope.row.updateAt) }}</template>
    </pageContent>
    <pageModal ref="modalRef" :modal-config="modalConfig" :other-info="otherInfo">
      <template #menuList>
        <el-tree
          ref="treeRef"
          :data="mainStore.entireMenu"
          :props="{ children: 'children', label: 'name' }"
          node-key="id"
          @check="handleCheckClick"
          accordion
          show-checkbox
        />
      </template>
    </pageModal>
  </div>
</template>

<script setup lang="ts" name="department">
import { ref, nextTick } from 'vue'

import { formatUTC } from '@/utils/format'
import { mapMenuListToIds } from '@/utils/mapMnent'

import pageSearch from '@/components/pageSearch/page-search.vue'
import pageContent from '@/components/pageContent/page-content.vue'
import pageModal from '@/components/pageModal/pageModal.vue'

import searchConfig from './config/search.config'
import contentConfig from './config/content.config'
import modalConfig from './config/modal.config'

import useMainStore from '@/store/main/main'

import usePageCount from '@/hooks/usePageConunt'
import usePageModal from '@/hooks/usePageModal'

import type { ElTree } from 'element-plus'

const mainStore = useMainStore()
const treeRef = ref<InstanceType<typeof ElTree>>()
const otherInfo = ref({})
const { handleQueryClick, handleRestClick, contentRef } = usePageCount()

const { handleCreateClick, haldleEditClick, modalRef } = usePageModal(editCallBack)

function handleCheckClick(data1: any, data2: any) {
  const menuList = [...data2.checkedKeys, ...data2.halfCheckedKeys]
  otherInfo.value = { menuList }
}

function editCallBack(itemData: any) {
  const ids = mapMenuListToIds(itemData.menuList)
  nextTick(() => {
    treeRef.value.setCheckedKeys(ids)
  })
}
</script>

<style scoped>
.department {
  border-radius: 20px;
  overflow: hidden;
}
</style>
